<!-- 购买保障 -->
<template>
	<div class="insure-com">
		<div class="f-16 lin-24 bold ff-bold flex a-c">
			<div class="mr-10">
				{{ $t('submitParcel.buy_protection') }}
			</div>
			<i-switch v-model="buyProtection" true-color="#13ce66" @on-change="changeSwitch"
				:disabled="insure == 'Y' ? false : true"></i-switch>
		</div>
		<div class="mt-8 f-12 lin-18 col-888 ff-regular">{{ $t('submitParcel.buy_sub_protection') }}</div>
		<div class="mt-8 flex a-c f-w">
			<div
				v-for="(item, index) in insuranceInfoList" :key="index"
				class="flex a-c mr-16"
				>
				<img src="@/assets/images/parcel/ic-right-green-wbg.png" class="questionmark-icon" alt="" />
				<div class="mlr-4 col-222 f-12 lin-18 ff-regular">
					{{ item.insuranceName }}
				</div>
				<Tooltip placement="top" max-width="500">
					<div class="f-12 ff-regular lin-18" slot="content">
						{{item.notes}}
					</div>
					<img src="@/assets/images/parcel/ic-questionmark-gray.png" class="questionmark-icon" alt="" />
				</Tooltip>
			</div>
		</div>
		<div class="mt-8 bg-fff ptb-12 flex a-c">
			<!-- 保障服务费用 -->
			<div class="f-1 pl-16">
				<div class="col-888 f-14 lin-22 ff-regular">
					{{ $t('submitParcel.protection_cost_fee') }}
				</div>
				<div class="mt-4 flex a-c">
					<div class="col-222 bold f-16 lin-24 ff-bold mr-4">
						{{ costRelated.currencyCode }} {{ costRelated.insuranceFee }}
					</div>
					<Tooltip :content="compShow()" placement="top" max-width="300">
						<img src="@/assets/images/parcel/ic-questionmark-gray.png" class="questionmark-icon" alt="" />
					</Tooltip>
				</div>
			</div>
			<!-- 保障费率 -->
			<div class="f-1 pl-16 com-left">
				<div class="col-888 f-14 lin-22 ff-regular">
					{{ $t('submitParcel.protection_interest_rate') }}
				</div>
				<div class="col-222 bold f-16 lin-24 ff-bold mt-4">
					3%
				</div>
			</div>
			<!-- 产品保障金额 -->
			<div class="f-1 pl-16 com-left">
				<div class="col-888 f-14 lin-22 ff-regular">
					{{ $t('submitParcel.product_pro_amount') }}
				</div>
				<div class="mt-4 flex a-c">
					<div class="col-222 bold f-16 lin-24 ff-bold mr-4">
						{{ costRelated.currencyCode }} {{ costRelated.orderItemAmount }}
					</div>
					<Tooltip :content="$t('submitParcel.pro_amount_tip_text')" placement="top" max-width="300">
						<img src="@/assets/images/parcel/ic-questionmark-gray.png" class="questionmark-icon" alt="" />
					</Tooltip>
				</div>
			</div>
			<!-- 运输保障金额 -->
			<div class="f-1 pl-16 com-left">
				<div class="col-888 f-14 lin-22 ff-regular">
					{{ $t('submitParcel.waybill_pro_amount') }}
				</div>
				<div class="col-222 bold f-16 lin-24 ff-bold mt-4">
					{{ costRelated.currencyCode }} {{ costRelated.logisticsFee }}
				</div>
			</div>
		</div>
	</div>
</template>
<script>

export default {
	props: {
		insure: {
			type: String,
			default: ''
		},
		insuranceInfoList: {
			type: Array,
			default() {
				return []
			}
		},
		costRelated: {
			type: Object,
			default() {
				return {}
			}
		}
	},
	data() {
		return {
			buyProtection: false,
			sel_insure: [],
			insureList: [
				{
					id: "1",
					insuranceId: "1000",
					"name": this.$t('submitParcel.delay_insure'),
					"description": this.$t('submitParcel.delay_tips'),
				},
				{
					id: "2",
					insuranceId: "1001",
					"name": this.$t('submitParcel.lose_insure'),
					"description": this.$t('submitParcel.lose_tips'),
				},
				{
					id: "3",
					insuranceId: "1002",
					"name": this.$t('submitParcel.customs_insure'),
					"description": this.$t('submitParcel.customs_tips'),
				}
			]
		}
	},
	methods: {
		// 购买保障
		changeSwitch(val) {
			this.$emit('switchMet', val);//开启关闭都触发试算
		},
		compShow() {
			if (this.buyProtection) {
				return `(${this.costRelated.currencyCode} ${this.costRelated.orderItemAmount} + ${this.costRelated.currencyCode} ${this.costRelated.logisticsFee})*3%`;
			} else {
				return this.$t('submitParcel.please_buy_pro_services');
			}
		}
	}
}
</script>
<style lang="less" scoped>
/deep/.ivu-checkbox-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 36px;
}

/deep/.ivu-checkbox-checked .ivu-checkbox-inner {
	background-color: #03CE91;
	border-color: transparent;
}

.insure-com {
	.questionmark-icon{
		width: 16px;
		height: 16px;
		vertical-align:middle;
	}
	.com-left{
		border-left: 1px solid #E2E2E2;
	}
}
</style>
